<template>
	<div class="login-container">
	  <el-form
		  ref="loginFormRef"
		  :model="loginData"
		  :rules="loginRules"
		  class="login-form"
	  >
		<h1 class="title">欢迎使用</h1>
		<el-form-item prop="username">
		  <el-input
			  prefix-icon="User"
			  ref="username"
			  v-model="loginData.username"
			  placeholder="请输入账号"
			  name="username"
			  type="text"
		  />
		</el-form-item>

		<el-form-item prop="password">
		  <el-input
			  prefix-icon="Lock"
			  v-model="loginData.password"
			  class="flex-1"
			  placeholder="请输入密码"
			  :type="passwordVisible === false ? 'password' : 'input'"
			  name="password"
			  @keyup="checkCapslock"
			  @keyup.enter="handleLogin"
		  />
		</el-form-item>

			<!-- 验证码 -->
			<el-form-item prop="code">
				<el-input
					prefix-icon="Picture"
					type="text"
					placeholder="点击图片更换验证码"
					v-model="loginData.code"
					class="vertify_code"
					auto-complete="true"
				></el-input>
				<div @click = "getCaptcha" >
					<SIdentify :identifyCode="identifyCode"/>
				</div>
				<!-- <span class="code">验证码</span> -->
<!--				<img src="@/assets/code.png" @click="getCaptcha" alt="验证吗"/>-->
			</el-form-item>

		<el-checkbox style="margin: 0 0 20px 0; color: black">
		  记住我
		</el-checkbox>

		<el-form-item class="form-btn">
		  <el-button
			  size="default"
			  :loading="loading"
			  type="primary"
			  class="login-btn"
			  @click.prevent="handleLogin"
		  >
			<span v-if="!loading">登 录</span>
			<span v-else>登 录 中...</span>
		  </el-button>

		</el-form-item>

		<el-form-item style="text-align: center;margin-top: 15px;">
		  <el-link type="primary" @click="handleRegister" style="margin-right: 5px">用户注册</el-link>
		  <el-link type="primary" @click = "handleForget">忘记密码</el-link>
		</el-form-item>
	  </el-form>
	</div>

</template>

<script setup lang="ts">

/* listen router change and set the query  */
//element valid
import {$local} from "@/store/index.ts"
import OpenApi from '@/utils/commom/openApi.ts'
// import {ElForm, ElMessage} from "element-plus";
import {onMounted, ref} from "vue";
import {LoginData} from "@/views/login/model/loginModel.ts";
import router from "@/router";
import {errorMsg, warnMsg} from "@/utils/commom/ticps.ts";


/**
 * 按钮loading
 */
const loading = ref(false);
/**
 * 是否大写锁定
 */
const isCapslock = ref(false);
/**
 * 密码是否可见
 */
const passwordVisible = ref(false);

/**
 * 登录表单引用
 */
const loginFormRef = ref(ElForm);
// 图形验证码
let identifyCodes = "1234567890ABCDEFGHGKMNPQRSTUVWXY"
let identifyCode = ref('');
const loginData = ref<LoginData>({
  username: "admin",
  password: "admin",
	code:"",
})

const loginRules = {
  username: [{required: true, trigger: "blur"}],
  password: [{required: true, trigger: "blur", validator: passwordValidator}],
  code: [ { required: true, message: '请输入验证码',
				trigger: 'blur',validator: checkCode, },
	],
};

/**
 * 密码校验器
 */
function passwordValidator(_rule: any, value: any, callback: any) {

  if (value.length < 6) {
	callback(new Error("密码不能少于6位"));
  } else {
	callback();
  }
}

function checkCode(_rule: any, value: any, callback: any) {
	if (!value) {
		return  callback(new Error('请输入验证码'))
	}
	setTimeout(() => {
		if (value != identifyCode.value) {
			callback(new Error('验证码有误，请重新输入'))
		}else {
			callback()
		}
	}, 500)
}

// function getCaptcha() {
//
// }
const getCaptcha = () => {
	identifyCode.value = '';
	makeCode(identifyCodes,4);
}

/**
 * 检查输入大小写状态
 */
function checkCapslock(e: any) {
  const {key} = e;
  isCapslock.value = key && key.length === 1 && key >= "A" && key <= "Z";
}

function handleLogin() {
  let data = loginData.value;
  if (data.username =="" || data.password ==""){
	errorMsg("账号密码不能为空");
	return
  }
	if (data.code !=  identifyCode.value){
		errorMsg("验证码不正确, 请重新输入");
		return;
	}
  loading.value =true;

  OpenApi.login({username:data.username,userpassword:data.password}).then(res=>{
			if (res.code == 0){
			  loading.value = false;
			  $local.set("user",res.data);
			  loginData.value={
					username:"",
					password:"",
					code:"",
			  };
			  router.replace("/");

			}

	  }
  ).catch(err=>{
		console.log(err);
		loading.value = false;
	  }
  )

}

function handleRegister(){
  warnMsg("正在开发中 ，请敬请期待");
  // ElMessage.success("正在开发中 ，请敬请期待")
}
function handleForget() {
  warnMsg("正在开发中 ，请敬请期待");
}


const randomNum =(min:number,max:number):number=>{
	return Math.floor(Math.random()*(max-min) +min);
}

const makeCode = (o:string,l:number) => {
  for (let i =0;i<l;++i){
		identifyCode.value +=o[randomNum(0,o.length)];
	}
}

onMounted(()=>{

	identifyCode.value ='';
	makeCode(identifyCodes,4);
})

</script>

<style lang="scss" scoped>
.login-container {
	position: absolute;
	top: 0;
	//bottom: 0;
	left: 0;
	//right: 0;
	display: flex;
	//flex-direction: column; /* 或者 row，根据需要 */
	height: 100%;
  //background-color: #008489;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-size: cover;
	background-image: url("src/assets/home.png");
}

.title {
  margin: 0 auto 30px auto; //上、右、下、左
  text-align: center;
  color: black;

}

.login-form {
	//margin-left: 550px;
  border-radius: 20px;
 	background: darkgrey;
  width: 350px;
  height: 450px;
  padding: 25px 25px 5px 25px; //上右下左
  .el-input {
	margin-top: 10px;
	margin-bottom: 10px;
	height: 40px;

	input {
	  height: 38px;
	}
  }
}

.form-btn{
  margin-top: 10px;
  width: 100%;
}
.login-btn{
  width: 100%;
}
.verify-style{
	width: 40%;
}

.vertify_code {
	width: 180px;
}
img{
	overflow-clip-margin: content-box;
	overflow: clip;
	width: 130px;
	margin: auto auto auto 10px;
}


</style>
